<!-- 菜单组件 -->
<template>
  <!-- 注意这里千万不要加外层div,否则会出现菜单折叠后文字和箭头不隐藏的问题 -->
  <template v-for="menu in menuList">
    <!-- 包含子节点 -->
    <el-sub-menu
      v-if="menu.children && menu.children.length > 0"
      :index="menu.rouePath"
      :key="menu.name"
    >
      <template #title>
        <!-- 图标 -->
        <i class="iconfont" :class="menu.icon"></i>
        <!-- 名称 -->
        <span class="m_l_4">{{ menu.name }}</span>
      </template>

      <el-menu-item-group>
        <!-- 递归 -->
        <CommonMenu :menuList="menu.children"></CommonMenu>
      </el-menu-item-group>
    </el-sub-menu>

    <!-- 不包含子节点 -->
    <el-menu-item v-else :index="menu.rouePath" :key="menu.name + ''">
      <!-- 图标 -->
      <i class="iconfont" :class="menu.icon"></i>
      <!-- 名称 -->
      <span class="m_l_4">{{ menu.name }}</span>
    </el-menu-item>
  </template>
</template>
<script>
export default {
  name: "CommonMenu",
};
</script>
<script setup>
//传递的菜单数组
defineProps(["menuList"]);
</script>
<style lang="scss" scoped></style>
